﻿@model YQBlog.Models.AlbumModel
@using res = Resource.Views.Home.Home;
@{YQBlog.General.GeneralConfigInfo ci = ViewBag.CI as YQBlog.General.GeneralConfigInfo;} 

@{
    Layout = null;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Album</title>
<style type="text/css">
<!--
    html,body{height:100%}
    body {margin:0; padding:0; background:#333 url(/Content/Album/sw_page_bg.png);overflow:hidden; font-family:Helvetica, Arial, sans-serif; font-size:16px;}
    font-face 
    {
	    font-family: 'eurof55-webfont';
	    src: url('/Content/Album/fonts/eurof55-webfont.eot');
	    src: local('☺'), url('/Content/Album/fonts/eurof55-webfont.woff') format('woff'), url('/Content/Album/fonts/eurof55-webfont.ttf') format('truetype'), url('/Content/Album/fonts/eurof55-webfont.svg#webfont8xigBfG2') format('svg');
    }
    font-face 
    {
	    font-family: 'eurof35-webfont';
	    src: url('/Content/Album/fonts/eurof35-webfont.eot');
	    src: local('☺'), url('/Content/Album/fonts/eurof35-webfont.woff') format('woff'), url('/Content/Album/fonts/eurof35-webfont.ttf') format('truetype'), url('/Content/Album/fonts/eurof35-webfont.svg#webfont8xigBfG2') format('svg');
    }
    font-face 
    {
	    font-family: 'graublauweb-webfont';
	    src: url('/Content/Album/fonts/graublauweb-webfont.eot');
	    src: local('☺'), url('/Content/Album/fonts/graublauweb-webfont.woff') format('woff'), url('/Content/Album/fonts/graublauweb-webfont.ttf') format('truetype'), url('/Content/Album/fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
    }
    .clear{clear:both;}
    a:link,a:visited,a:hover{color:#ddd;}
    a:hover{color:#fff; text-decoration:none;}
    #bg{position:fixed; left:585px; top:0; width:100%; height:100%;}
    #bgimg{display:none; cursor:pointer; -ms-interpolation-mode: bicubic;} /* special IE fix for resized images */
    #preloader{position:absolute; z-index:2; width:140px; padding:20px; top:20px; left:50px; background:#000; color:#666; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:16px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
    #preloader img{margin-right:20px;}
    #toolbar{display:inline-block; padding:4px 15px; margin:20px 15px; background:#262626 url(/Content/Album/sw_btn_bg.png) repeat-x; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:12px; color:#fff; cursor:pointer;}
    #outer_container{position:relative; margin:0; width:700px; padding:0 100px 0 0; z-index:2; background:url(/Content/Album/empty.gif);} /* fucking IE needs a background value to understand hover area */
    #customScrollBox{position:relative; overflow:hidden; background:url(/Content/Album/sw_l_bg.png) repeat-y;}
    #customScrollBox .container{position:relative; width:585px; top:0; float:left;}
    #customScrollBox .content{clear:both;}
    #customScrollBox .content h1{padding:5px; margin:10px; color:#fff; font-family:eurof55-webfont, Helvetica, Arial, sans-serif; font-size:48px;}
    #customScrollBox .content h2{padding:5px; margin:10px 10px 0 10px; color:#fff; font-family:eurof35-webfont, Helvetica, Arial, sans-serif; font-size:24px;}
    #customScrollBox .content p{padding:5px; margin:0 10px 10px 10px; color:#ddd; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; line-height:26px;}
    .light{font-family:eurof35-webfont, Helvetica, Arial, sans-serif;}
    .grey{color:#999;}
    .lightgrey{color:#ddd;}
    .s36{font-size:36px;}
    .s24{font-size:24px;}
    #customScrollBox a.thumb_link{position:relative; margin:0 0 1px 1px; display:block; float:left;}
    #customScrollBox img{border:none;}
    #customScrollBox a.thumb_link .selected{position:absolute; top:0; left:0; width:145px; height:91px; background:url(/Content/Album/sw_thumb_selected.png) no-repeat; display:none;}
    #dragger_container{position:relative; width:30px; height:580px; float:left; margin:10px 0 0 0; background:url(/Content/Album/sw_dragger_bg.png) repeat-y center;}
    #dragger{position:absolute; width:30px; height:59px; background:url(/Content/Album/round_custom_scrollbar_bg.png) no-repeat center center; cursor:pointer;}
    #arrow_indicator{position:absolute; z-index:1; width:50px; padding:10px; top:50%; margin-top:-25px; left:20px; background:url(/Content/Album/sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none;}
    #nextimage_tip{position:fixed; z-index:1; padding:0 20px; line-height:40px; color:#fff; height:40px; top:50%; margin-top:-20px; right:20px; background:url(/Content/Album/sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif;}
    .with_border{border:1px solid #000;}
    .with_shadow{-moz-box-shadow:0 0 40px #000; -webkit-box-shadow:0 0 40px #000; box-shadow:0 0 40px #000;}
-->
</style>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.easing.1.3.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mousewheel.min.js")"></script>
</head>

<body>
<div id="outer_container">
<div id="customScrollBox">
	<div class="container">
    	<div class="content">
        	<h1><span class="lightgrey">相册</span> <br /><span class="light"><span class="grey"><span class="s36">@Model.Title</span></span></span></h1>
            <div id="toolbar"></div><div class="clear"></div>
                @foreach (var item in Model.ImageList)
                {
                    string imgsrc = item.Src;
                    string imgsrc1 = imgsrc;
                    string imgpath = imgsrc.Remove(imgsrc.LastIndexOf("/"));
                    string imgname = imgsrc.Remove(0, imgsrc.LastIndexOf("/") + 1);
                    imgsrc = imgpath + "/145x145/" + imgname;                    
                    <a href="@(imgsrc1)" class="thumb_link">
                    <span class="selected"></span>
                    <img src="@(imgsrc)"  title="@item.Title" alt="@item.Alt" class="thumb"/>
                    </a>
                }
                <p class="clear"></p>
                <p><div class="prenextlink">@Html.Raw(ViewBag.PreNextLink)</div></p>
            </div>
	    </div>
        <div id="dragger_container"><div id="dragger"></div></div>
    </div>
</div>
<div id="bg">
    <img src="" title="Supremus Lucernarium" id="bgimg" />
	<div id="preloader"><img src="/Content/Album/ajax-loader_dark.gif" width="32" height="32" align="absmiddle" />LOADING...</div>
    <div id="arrow_indicator"><img src="/Content/Album/sw_arrow_indicator.png" width="50" height="50"  /></div>
    <div id="nextimage_tip">Click for next image</div>
</div>
<script>
    //set default view mode
    $defaultViewMode = "original"; //full (fullscreen background), fit (fit to window), original (no scale)
    //cache vars
    $bg = $("#bg");
    $bgimg = $("#bg #bgimg");
    $preloader = $("#preloader");
    $outer_container = $("#outer_container");
    $outer_container_a = $("#outer_container a.thumb_link");
    $toolbar = $("#toolbar");
    $nextimage_tip = $("#nextimage_tip");

    $(window).load(function () {
        $toolbar.data("imageViewMode", $defaultViewMode); //default view mode
        ImageViewMode($toolbar.data("imageViewMode"));
        //cache vars
        $customScrollBox = $("#customScrollBox");
        $customScrollBox_container = $("#customScrollBox .container");
        $customScrollBox_content = $("#customScrollBox .content");
        $dragger_container = $("#dragger_container");
        $dragger = $("#dragger");

        CustomScroller();

        function CustomScroller() {
            outerMargin = 0;
            innerMargin = 20;
            $customScrollBox.height($(window).height() - outerMargin);
            $dragger_container.height($(window).height() - innerMargin);
            visibleHeight = $(window).height() - outerMargin;
            if ($customScrollBox_container.height() > visibleHeight) { //custom scroll depends on content height
                $dragger_container, $dragger.css("display", "block");
                totalContent = $customScrollBox_content.height();
                draggerContainerHeight = $(window).height() - innerMargin;
                animSpeed = 400; //animation speed
                easeType = "easeOutCirc"; //easing type
                bottomSpace = 1.05; //bottom scrolling space
                targY = 0;
                draggerHeight = $dragger.height();
                $dragger.draggable({
                    axis: "y",
                    containment: "parent",
                    drag: function (event, ui) {
                        Scroll();
                    },
                    stop: function (event, ui) {
                        DraggerOut();
                    }
                });

                //scrollbar click
                $dragger_container.click(function (e) {
                    var mouseCoord = (e.pageY - $(this).offset().top);
                    var targetPos = mouseCoord + $dragger.height();
                    if (targetPos < draggerContainerHeight) {
                        $dragger.css("top", mouseCoord);
                        Scroll();
                    } else {
                        $dragger.css("top", draggerContainerHeight - $dragger.height());
                        Scroll();
                    }
                });

                //mousewheel
                $(function ($) {
                    $customScrollBox.bind("mousewheel", function (event, delta) {
                        vel = Math.abs(delta * 10);
                        $dragger.css("top", $dragger.position().top - (delta * vel));
                        Scroll();
                        if ($dragger.position().top < 0) {
                            $dragger.css("top", 0);
                            $customScrollBox_container.stop();
                            Scroll();
                        }
                        if ($dragger.position().top > draggerContainerHeight - $dragger.height()) {
                            $dragger.css("top", draggerContainerHeight - $dragger.height());
                            $customScrollBox_container.stop();
                            Scroll();
                        }
                        return false;
                    });
                });

                function Scroll() {
                    var scrollAmount = (totalContent - (visibleHeight / bottomSpace)) / (draggerContainerHeight - draggerHeight);
                    var draggerY = $dragger.position().top;
                    targY = -draggerY * scrollAmount;
                    var thePos = $customScrollBox_container.position().top - targY;
                    $customScrollBox_container.stop().animate({ top: "-=" + thePos }, animSpeed, easeType); //with easing
                }

                //dragger hover
                $dragger.mouseup(function () {
                    DraggerOut();
                }).mousedown(function () {
                    DraggerOver();
                });

                function DraggerOver() {
                    $dragger.css("background", "url(/Content/Album/round_custom_scrollbar_bg_over.png)");
                }

                function DraggerOut() {
                    $dragger.css("background", "url(/Content/Album/round_custom_scrollbar_bg.png)");
                }
            } else { //hide custom scrollbar if content is short
                $dragger, $dragger_container.css("display", "none");
            }
        }

        //resize browser window functions
        $(window).resize(function () {
            FullScreenBackground("#bgimg"); //scale bg image
            $dragger.css("top", 0); //reset content scroll
            $customScrollBox_container.css("top", 0);
            $customScrollBox.unbind("mousewheel");
            CustomScroller();
        });

        LargeImageLoad($bgimg);
    });

    //loading bg image
    $bgimg.load(function () {
        LargeImageLoad($(this));
    });

    function LargeImageLoad($this) {
        $preloader.fadeOut("fast"); //hide preloader
        $this.removeAttr("width").removeAttr("height").css({ width: "", height: "" }); //lose all previous dimensions in order to rescale new image data
        $bg.data("originalImageWidth", $this.width()).data("originalImageHeight", $this.height());
        if ($bg.data("newTitle")) {
            $this.attr("title", $bg.data("newTitle")); //set new image title attribute
        }
        FullScreenBackground($this); //scale new image
        $bg.data("nextImage", $($outer_container.data("selectedThumb")).next().attr("href")); //get and store next image
        if (typeof itemIndex != "undefined") {
            if (itemIndex == lastItemIndex) { //check if it is the last image
                $bg.data("lastImageReached", "Y");
                $bg.data("nextImage", $outer_container_a.first().attr("href")); //get and store next image
            } else {
                $bg.data("lastImageReached", "N");
            }
        } else {
            $bg.data("lastImageReached", "N");
        }
        $this.fadeIn("slow"); //fadein background image
        if ($bg.data("nextImage") || $bg.data("lastImageReached") == "Y") { //don't close thumbs pane on 1st load
            SlidePanels("close"); //close the left pane
        }
        NextImageTip();
    }

    //slide in/out left pane
    $outer_container.hover(
		function () { //mouse over
		    SlidePanels("open");
		},
		function () { //mouse out
		    SlidePanels("close");
		}
	);

    //Clicking on thumbnail changes the background image
    $outer_container_a.click(function (event) {
        event.preventDefault();
        var $this = this;
        $bgimg.css("display", "none");
        $preloader.fadeIn("fast"); //show preloader
        //style clicked thumbnail
        $outer_container_a.each(function () {
            $(this).children(".selected").css("display", "none");
        });
        $(this).children(".selected").css("display", "block");
        //get and store next image and selected thumb 
        $outer_container.data("selectedThumb", $this);
        $bg.data("nextImage", $(this).next().attr("href"));
        $bg.data("newTitle", $(this).children("img").attr("title")); //get and store new image title attribute
        itemIndex = getIndex($this); //get clicked item index
        lastItemIndex = ($outer_container_a.length) - 1; //get last item index
        $bgimg.attr("src", "").attr("src", $this); //switch image
    });

    //clicking on large image loads the next one
    $bgimg.click(function (event) {
        var $this = $(this);
        if ($bg.data("nextImage")) { //if next image data is stored
            $this.css("display", "none");
            $preloader.fadeIn("fast"); //show preloader
            $($outer_container.data("selectedThumb")).children(".selected").css("display", "none"); //deselect thumb
            if ($bg.data("lastImageReached") != "Y") {
                $($outer_container.data("selectedThumb")).next().children(".selected").css("display", "block"); //select new thumb
            } else {
                $outer_container_a.first().children(".selected").css("display", "block"); //select new thumb - first
            }
            //store new selected thumb
            var selThumb = $outer_container.data("selectedThumb");
            if ($bg.data("lastImageReached") != "Y") {
                $outer_container.data("selectedThumb", $(selThumb).next());
            } else {
                $outer_container.data("selectedThumb", $outer_container_a.first());
            }
            $bg.data("newTitle", $($outer_container.data("selectedThumb")).children("img").attr("title")); //get and store new image title attribute
            if ($bg.data("lastImageReached") != "Y") {
                itemIndex++;
            } else {
                itemIndex = 0;
            }
            $this.attr("src", "").attr("src", $bg.data("nextImage")); //switch image
        }
    });

    //function to get element index (fuck you IE!)
    function getIndex(theItem) {
        for (var i = 0, length = $outer_container_a.length; i < length; i++) {
            if ($outer_container_a[i] === theItem) {
                return i;
            }
        }
    }

    //toolbar (image view mode button) hover
    $toolbar.hover(
		function () { //mouse over
		    $(this).stop().fadeTo("fast", 1);
		},
		function () { //mouse out
		    $(this).stop().fadeTo("fast", 0.8);
		}
	);
    $toolbar.stop().fadeTo("fast", 0.8); //set its original state

    //Clicking on toolbar changes the image view mode
    $toolbar.click(function (event) {
        if ($toolbar.data("imageViewMode") == "full") {
            ImageViewMode("fit");
        } else if ($toolbar.data("imageViewMode") == "fit") {
            ImageViewMode("original");
        } else if ($toolbar.data("imageViewMode") == "original") {
            ImageViewMode("full");
        }
    });

    //next image balloon tip
    function NextImageTip() {
        if ($bg.data("nextImage")) { //check if this is the first image
            $nextimage_tip.stop().css("right", 20).fadeIn("fast").fadeOut(2000, "easeInExpo", function () { $nextimage_tip.css("right", $(window).width()); });
        }
    }

    //slide in/out left pane function
    function SlidePanels(action) {
        var speed = 900;
        var easing = "easeInOutExpo";
        if (action == "open") {
            $("#arrow_indicator").fadeTo("fast", 0);
            $outer_container.stop().animate({ left: 0 }, speed, easing);
            $bg.stop().animate({ left: 585 }, speed, easing);
        } else {
            $outer_container.stop().animate({ left: -710 }, speed, easing);
            $bg.stop().animate({ left: 0 }, speed, easing, function () { $("#arrow_indicator").fadeTo("fast", 1); });
        }
    }

    //Image scale function
    function FullScreenBackground(theItem) {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        var imageWidth = $(theItem).width();
        var imageHeight = $(theItem).height();
        if ($toolbar.data("imageViewMode") != "original") { //scale
            $(theItem).removeClass("with_border").removeClass("with_shadow"); //remove extra styles of orininal view mode
            var picHeight = imageHeight / imageWidth;
            var picWidth = imageWidth / imageHeight;
            if ($toolbar.data("imageViewMode") != "fit") { //image view mode: full
                if ((winHeight / winWidth) < picHeight) {
                    $(theItem).css("width", winWidth).css("height", picHeight * winWidth);
                } else {
                    $(theItem).css("height", winHeight).css("width", picWidth * winHeight);
                };
            } else { //image view mode: fit
                if ((winHeight / winWidth) > picHeight) {
                    $(theItem).css("width", winWidth).css("height", picHeight * winWidth);
                } else {
                    $(theItem).css("height", winHeight).css("width", picWidth * winHeight);
                };
            }
            //center it
            $(theItem).css("margin-left", ((winWidth - $(theItem).width()) / 2)).css("margin-top", ((winHeight - $(theItem).height()) / 2));
        } else { //no scale
            //add extra styles for orininal view mode
            $(theItem).addClass("with_border").addClass("with_shadow");
            //set original dimensions
            $(theItem).css("width", $bg.data("originalImageWidth")).css("height", $bg.data("originalImageHeight"));
            //center it
            $(theItem).css("margin-left", ((winWidth - $(theItem).outerWidth()) / 2)).css("margin-top", ((winHeight - $(theItem).outerHeight()) / 2));
        }
    }

    //image view mode function - full or fit
    function ImageViewMode(theMode) {
        $toolbar.data("imageViewMode", theMode); //store new mode
        FullScreenBackground($bgimg); //scale bg image
        //re-style button
        if (theMode == "full") {
            $toolbar.html("<span class='lightgrey'>IMAGE VIEW MODE &rsaquo;</span> FULL");
        } else if (theMode == "fit") {
            $toolbar.html("<span class='lightgrey'>IMAGE VIEW MODE &rsaquo;</span> FIT");
        } else {
            $toolbar.html("<span class='lightgrey'>IMAGE VIEW MODE &rsaquo;</span> ORIGINAL");
        }
    }

    //preload script images
    var images = ["ajax-loader_dark.gif", "round_custom_scrollbar_bg_over.png"];
    $.each(images, function (i) {
        images[i] = new Image();
        images[i].src = this;
    });
</script>
</body>
</html>